<template>
  <BasicModal v-bind="$attrs" @register="register" showFooter :title="getTitle" width="70%" :showOkBtn="false"
    :loading="loading" @cancel="cancelFn">
    <!-- 审批进度 -->
    <div style="width: 100%; height: 450px">
      <!-- v-on="gridEvents" overflow: hidden -->
      <vxe-grid ref="tableRef" v-bind="gridOptions" v-on="gridEvents">
        <template #toolbar_buttons>
          <Button class="s-l" @click="openExcludeFn" v-if="!isView">查看已排除选项</Button>
          <div style="display: flex; align-items: center;">
            <Input class="s-l" v-model:value="keyword" style="width: 150px"></Input>
            <Button class="s-l" type="primary" @click="initFn" size="small" :loading="loading">搜索批次号</Button>
          </div>

        </template>
        <template #footer_duiZhangRenMinBiJinE>
          <span style="color: red;">{{ totalObj.duiZhangRenMinBiJinE }}{{ totalObj.duiZhangRenMinBiJinE ? '元' : ''
          }}</span>
        </template>
        <template #footer_duiZhangJinE>
          <span style="color: red;">{{ totalObj.duiZhangJinE }}</span>
        </template>

      </vxe-grid>

      <ExcludeFaPiaoModal @register="efModal[0]" @success="reloadFn"></ExcludeFaPiaoModal>
    </div>
    <template #centerFooter>
      <Button type="primary" @click="batchExcludeFapiaoAddFn" v-if="!isView">排除选项</Button>
    </template>
  </BasicModal>
</template>
<script lang="ts" setup>
import { ref, computed, unref, h, toRaw, reactive } from 'vue';


import { fapiaoColumns, fapiaoTotalCountFn } from './role.data';
import { BasicModal, useModal, useModalInner } from '@/components/Modal';
import {
  BasicTableProps,
  VxeBasicTable,
  VxeGridInstance,
  VxeGridListeners,
  VxeTableDefines,
} from '@/components/VxeTable';
import { BasicTree, TreeItem } from '@/components/Tree';
import { approveCreateBefore, approveSubmit, shouKuanQueRenItemList, shouKuanQueRenItemAllList, batchExcludeFapiaoAdd, batchExcludeFapiaoRemove, getExcludeFapiaoList } from '@/api/heng/ywManage';

import { Modal, Timeline, TimelineItem, Button, Input } from 'ant-design-vue';
import { BasicListResult, BasicDataResult } from '@/api/model/baseModel';

import ExcludeFaPiaoModal from './ExcludeFaPiaoModal.vue';

import { useMessage } from "@/hooks/web/useMessage";

const emit = defineEmits(['success', 'register']);
const isUpdate = ref(true);
const treeData = ref<TreeItem[]>([]);
const { createMessage } = useMessage();
const mouldMainId = ref("");
const totalObj = ref({ duiZhangRenMinBiJinE: 0, duiZhangJinE: 0 });
const applyViewShow = ref(false);
const visible = ref(false);
const msgList = ref([]);
const keyword = ref("");

const tableRef = ref<VxeGridInstance>();

const gridOptions = reactive<BasicTableProps>({
  // keepSource: true,
  border: true,
  showOverflow: true,
  size: 'mini',
  height: 'auto', // 'auto'
  columns: fapiaoColumns,
  exportConfig: {},
  // filterConfig: {
  //   remote: true,
  // },
  showFooter: true,
  footerData: [
    { skqrNo: '合计' }
  ],
  toolbarConfig: {
    slots: {
      buttons: 'toolbar_buttons',
    },
    refresh: true,
  },

  pagerConfig: {
    enabled: false
  },

});


const startNodeList = ref([]);
const loading = ref(false);
const dataList = ref([]);
const efModal = useModal();
const isView = ref(false);
const isAll = ref(false);
const dataJson = ref({});//审批发起后 返回的数据
const orderNo = ref("");
const approveNo = ref("");

const [register, { setModalProps, closeModal }] = useModalInner(async (data) => {
  //打开弹层后的回调
  // resetFields();

  // dataList.value = data.selectList;
  // console.log(data.record);

  tableRef.value?.reloadData([]);
  isView.value = data.isView;
  isAll.value = data.isAll;
  keyword.value = "";

  if (isView.value) {
    fapiaoColumns[0].visible = false;
  } else {
    fapiaoColumns[0].visible = true;
  }
  tableRef.value?.reloadColumn(fapiaoColumns);

  orderNo.value = data.record.orderNo;
  approveNo.value = data.record.approveNo;
  // console.log("----dataJson.value:",dataJson.value)
  initFn();

});

function reloadFn() {
  emit("success")
  initFn();
}

async function searchFn(json) {
  let dJson = { skqrNo: orderNo.value, xiaoShouDingDanTIDLike: keyword.value };
  if (json) {
    dJson = { ...dJson, ...json };
  }
  setModalProps({ confirmLoading: true });
  loading.value = true;
  let res: BasicListResult<any> = { code: 0, data: [], message: "" };
  if (!isAll.value) {
    res = await shouKuanQueRenItemList(dJson);
  } else {
    dJson = { approveNo: approveNo.value };
    res = await shouKuanQueRenItemAllList(dJson);
  }
  if (res && res.code == 200) {
    let list = res.data;
    totalObj.value = fapiaoTotalCountFn(list);
    // console.log("---totalObj.value:",totalObj.value)
    gridOptions.footerData = [{ skqrNo: "合计:" + list.length + "条" }];
    tableRef.value?.reloadData(list);
  } else {
    createMessage.error(res.message);
  }
  dataJson.value = res.data;
  loading.value = false;
  setModalProps({ confirmLoading: false });
}

function initFn() {
  searchFn(null);
}



const getTitle = computed(() => ('发票核销明细信息'));


function applyViewOpen() {
  applyViewShow.value = true;
}

function applyViewClose() {
  applyViewShow.value = false;
}

//async function handleSubmit()

function batchExcludeFapiaoAddFn() {
  let list = tableRef.value.getCheckboxRecords();

  if (list.length == 0) {
    createMessage.error('请勾选排除数据!');
    return false;
  }
  loading.value = true;
  setModalProps({ confirmLoading: true });

  batchExcludeFapiaoAdd({ orderNo: orderNo.value, list }).then((res) => {

    if (res && res.code == 200) {
      setModalProps({ confirmLoading: false });

      initFn();

      createMessage.success(res.message);
      emit('success');
    } else {
      createMessage.error(res.message);
    }
  }).finally(() => {
    loading.value = false;
  })
}

function openExcludeFn() {
  setModalProps({ confirmLoading: true });

  efModal[1].openModal(true, {
    isView: isView.value,
    orderNo: orderNo.value
  });
  setModalProps({ confirmLoading: false });

}


const gridEvents: VxeGridListeners = {

  filterChange({ filterList }) {
    // console.log("----filterChange:", filterList);

    let tableData = tableRef.value?.getTableData();
    // console.log("----tableData:", tableData.visibleData);
    let list = tableData.visibleData;
    totalObj.value = fapiaoTotalCountFn(list);
    // console.log("---totalObj.value:",totalObj.value)
    gridOptions.footerData = [{ skqrNo: "合计:" + list.length + "条" }];
  },
};


function sunccFn(result) {
  if (result && result.code == 200) {
    applyViewClose();
    createMessage.success(result.message);
    closeModal()
    emit('success');
  } else {
    createMessage.error(result.message);
  }

}

function cancelFn() {
  // emit('success');
  closeModal()
}

function handleOk() {
  visible.value = false;
}

</script>
<style lang="less">
.item-row {
  margin: 0 auto;

  //padding-left: 5%;
  .ant-form-item-label {
    flex: 0 0 28.5%;
    max-width: 28.5%;
  }
}

.lqfp-8 {
  //padding-left: 9% !important;

}

.s-l {
  margin-right: 5px;
}
</style>
